<!--
@author [刘一笔 Sam]
@email [awesome_sam@qq.com]
@create date 2019-10-19 19:04:12
@modify date 2019-10-19 19:04:12
@desc 格式化后端接口为前端API
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>format tool</title>
    <link
      href="https://cdn.bootcss.com/Buttons/2.0.0/css/buttons.css"
      rel="stylesheet"
    />
    <style>
      * {
        box-sizing: border-box;
        font-family: initial;
      }
      body {
        margin: 0;
        padding: 0;
        background-color: beige;
      }
      textarea {
        resize: none;
        outline: none;
      }
      .wrapper {
        width: 800px;
        height: 300px;
        border: 1px solid;
        border-radius: 4px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-top: -150px;
        margin-left: -400px;
      }
      .wrapper .tool {
        height: 25px;
        background-color: lavender;
        display: flex;
        justify-content: space-around;
      }
      .wrapper .editArea {
        height: 273px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .wrapper .toBeTransfered,
      .wrapper .transfered {
        width: 50%;
        height: 100%;
      }
      .toBeTransfered textarea,
      .transfered textarea {
        width: 100%;
        height: 100%;
        padding: 5px;
        border-radius: 4px;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="tool">
        <!-- 工具栏 -->
        <!-- <button class="button button-3d button-primary button-rounded">
          <i class="fa fa-thumbs-up" id="transfer">转换</i>
        </button> -->
        <span id="transfer">转换</span>
        <span id="copyto">复制</span>
      </div>
      <div class="editArea">
        <div class="toBeTransfered">
          <!-- 待转换区域 -->
          <!-- 待转换区域 -->
          <textarea id="" class="tobeArea"></textarea>
        </div>
        <div class="transfered">
          <!-- 转换后的内容 -->
          <textarea id="" class="doneArea"></textarea>
        </div>
      </div>
    </div>

    <script>
      // export function getTodoTask (params = {}) {
      // return fetch({
      //     url: '/api/base/data/export/todo/common/todoTask',
      //     params
      //   })
      // }

      // 功能：获取老师分组
      // 接口：GET /analysis/view/tutor/teacher
      // 参数：schoolId gradeId
      // 功能：获取老师分组
      // 接口：GET /analysis/view/tutor/teacher
      // 参数：schoolId gradeId
      let transferBtn = document.getElementById("transfer");
      let tobeTransferedContent = document.getElementsByClassName("tobeArea");
      let toBeTransfered = tobeTransferedContent[0].value;
      function split(content) {
        if (content.indexOf("功能")) {
          // 如果有两个接口，那我如何判断第二个接口的开始位置
        }
      }
      function transfer(content) {
        // 注释获取
        let commentStartIndex = 3;
        let commentEndIndex = content.indexOf("接口");
        let comment = content.slice(3, commentEndIndex);
        // url获取
        let urlStartIndex = content.indexOf("/");
        let urlEndIndex = content.indexOf("参数");
        let url = content.slice(urlStartIndex, urlEndIndex - 1);
        // 请求方法获取
        let methodStartIndex = commentEndIndex + 3;
        let methodEndIndex = urlStartIndex;
        let method = content.slice(methodStartIndex, methodEndIndex);
        method = method === "GET" ? "params" : "data";
        // 返回值
        let template = `// ${comment}
export function ( ${method} = {} ) {
  return fetch({
  url:  '/api/base/data${url}',
  ${method}
  })
}`;
        let doneArea = document.getElementsByClassName("doneArea");
        doneArea[0].innerText = template;
      }
      transferBtn.addEventListener(
        "click",
        () => {
          transfer(toBeTransfered);
        },
        false
      );
    </script>
  </body>
</html>
